<template>
    <div class="customer">
        <el-form inline class="searchbar">
            <el-form-item label="客户ID">
                <el-input 
                    v-model="searchForm.consumerNumber" 
                    placeholder="请输入客户ID" 
                    maxlength="15"
                    clearable
                    @keyup.enter="search"
                ></el-input>
            </el-form-item>
            <el-form-item label="客户名称">
                <el-input 
                    v-model="searchForm.nickname" 
                    placeholder="请输入客户名称" 
                    clearable
                    @keyup.enter="search"
                ></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input 
                    v-model="searchForm.phoneNumber" 
                    maxlength="20"
                    placeholder="请输入手机号" 
                    clearable
                    @keyup.enter="search"
                ></el-input>
            </el-form-item>
            <el-form-item label="权限">
                <el-select v-model="searchForm.consumerType" placeholder="请选择权限" clearable>
                    <el-option
                        v-for="item in roleOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="width: auto;">
                <el-button type="primary" @click="clickTip">查找</el-button>
                <el-button @click="clickTip">复位</el-button>
            </el-form-item>
        </el-form>
        <el-table
            v-loading="loading"
            stripe
            border
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }"
            header-cell-class-name="dark-table-header"
            @selection-change="handleSelectionChange"
            ref="tableComp"
        >
            <el-table-column type="selection" align="center" />
            <el-table-column prop="consumerNumber" label="客户编号" align="center" width="80"/>
            <el-table-column prop="nickname" label="客户名称" align="center" width="80"/>
            <el-table-column prop="phoneNumber" label="手机号" align="center" />
            <el-table-column label="权限" align="center" width="100">
                <template #default="{ row }">
                    <el-space wrap>客户</el-space>
                </template>
            </el-table-column>
            <el-table-column prop="addressDelivery" label="收货地址" align="center" />
            <el-table-column prop="createTime" label="注册时间" align="center" />
            <el-table-column label="操作" width="100">
                <template #default="{ row, $index }">
                    <el-space wrap>
                        <el-button
                            size="small"
                            @mousedown="clickTip(row, $index)"
                        >详情</el-button>
                    </el-space>
                </template>
            </el-table-column>
        </el-table>

        <div class="customer-footer">
            <el-button @click="selectAll">{{ isAllSelected ? '取消全选' : '全选当前页' }}</el-button>
            <el-pagination
                v-model:currentPage="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
                :total="total"
                background
                layout="->, total, sizes, prev, pager, next, jumper"
                style="margin-top: 22px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: 'second'
}
</script>
<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useListLoader } from '@/util/listLoader'
import service from '@/service/customer'

const router = useRouter()
const tableComp = ref(null)
const exportLoading = ref(false)
const {
    searchForm,
    tableData,
    currentPage,
    total,
    loading,
    queryList,
    search,
    resetSearch,
    handleSizeChange,
    handleCurrentChange
} = useListLoader(service.query, {
    consumerNumber: '',
    nickName: '',
    phoneNumber: '',
    consumerType: ''
}, {
    pageNum: 1,
    pageSize: 10
})
const roleOptions = [
    {
        value: '1',
        label: '客户'
    },
    {
        value: '2',
        label: '营养师'
    },
    {
        value: '3',
        label: '经销商'
    }
]
const selectedData = ref([])
const isAllSelected = computed(() => {
    return tableData.value.length > 0 && selectedData.value.length === tableData.value.length
})
const editingData = ref({})

onMounted(() => {
    queryList() // 首次加载列表
})

function selectAll() {
    tableComp.value.toggleAllSelection()
}
function handleSelectionChange(val) {
    selectedData.value = val
}

function clickTip(params) {
    router.push({name:"secondAdd"})
    ElMessage({
        message: '点击反馈',
        type: 'success',
    })
}

</script>

<style lang="less">
.customer {
    .searchbar .el-form-item {
        width: 230px;
    }
    .btn-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        .remark {
            margin-left: 15px;
            color: #888;
            font-size: 14px;
        }
    }
    &-tips {
        margin: 20px 0;
        color: #888;
        font-size: 14px;
    }

    &-footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.address-list-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;

    &:first-child {
        margin-bottom: 25px;
    }
    &:last-child {
        margin-bottom: 0;
    }

    span:first-child {
        flex-shrink: 0;
    }
}
</style>
